<template>
    <div class="wrap">
        <div class="container">
            <div class="position_block">
                <div class="my_car_text">购物车</div>
            </div>
            <div class="car_center_content">
                <div class="car_out_content">
                    <div class="car_head_th">
                        <div>商品信息</div>
                        <div>订单备注</div>
                        <div>生产厂家</div>
                        <div>单价</div>
                        <div>数量</div>
                        <div>小计</div>
                        <div>操作</div>
                    </div>
                    <div class="car_box">
                        <div v-for="(item,index) in data" :key="index">
                            <div class="car_box_head">
                                <el-checkbox v-model="item.checked" @change="companyChecked(item)"></el-checkbox><span>{{item.name}}</span>
                            </div>
                            <div class="car_list" v-for="(goods,i) in item.goods" :key="i">
                                <div class="car_goods_info">
                                    <div class="checkbox"><el-checkbox v-model="goods.checked"></el-checkbox></div>
                                    <div class="img-box">
                                        <img :src="$commonImageUrl(goods.goods_image)">
                                    </div>
                                    <div class="goods_spec_info">
                                        <div class="goods_name">{{goods.goods_name}}</div>
                                        <div class="goods_gg">
                                            <p>型号：{{goods.goods_models}}</p>
                                            <p>规格：{{goods.sku_name}}</p>
                                            <p class="flex remark">备注：<span>{{goods.goods_remark}}</span></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="note">{{goods.goods_remark}}</div>
                                <div class="note">{{goods.factory_name}}</div>
                                <div class="price">￥{{goods.goods_price}}</div>
                                <div class="car_num_operate">
                                    <el-input-number v-model="goods.goods_num" @change="handleChange(goods)" :min="1"  label="描述文字"></el-input-number>
                                </div>
                                <div class="list_count_price">￥{{ goods.total_price }}</div>
                                <div class="car_delete">
                                    <a  @click="deleteGoods(item,goods)"></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 全选 结算-->
                    <div class="car_operate_bottom" v-show="data.length > 0">
                        <div class="left_operate">
                            <!-- <div class="checkbox">
                                <el-checkbox v-model="allChecked" @change="allCheckedChange"></el-checkbox> 全选
                            </div> -->
                            <div class="delete_div" @click="deleteBatchGoods">删除</div>
                            <div class="delete_div" @click="clearDownGoods">清除已下架商品</div>
                        </div>
                        <div>
                            <div>已选商品{{ goodsNumber }}件，合计（不含运费）：</div>
                            <div class="pay_price">{{ countAmount }}</div>
                            <div class="gopay"><a @click="goConfirm">去结算</a></div>
                        </div>
                    </div>
                    <!-- 全选 结算 结束 -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import api from "@/api/cart";
  export default {
    data() {
        return {
            data: [],
            num: 1,
            activeIndex: "0",
            checked: false,
            allChecked: false,
            goodsNumber: 0,
            countAmount: 0,
        };
    },
    methods: {
        deleteGoods: function (item,goods) { 
            this.deleteCartGoods(goods.id + "",item); 
        },
        //改变数量
        handleChange(item) {
            var input = {
                id: item.id,
                goods_num: item.goods_num
            }
            api.CalcCartGoods(input)
                .then((res) => {
                    if (res.code == 1) {
                        this.sumTotal();
                        item.total_price = res.data.total_price;
                    }
                    item.loading = false;
                }).catch((err) => {
                    item.loading = false;
            })
        },
        // 删除多个商品
        deleteBatchGoods: function () { 
            let ids = "";
            this.data.forEach(val => {
                ids = val.goods.filter(x => x.checked).map(x => x.id).join(",");
            })
            if (ids.length == 0) {
                this.$message.warning("请选择需要删除的商品");
                return;
            }
            this.deleteCartGoodsList(ids);
        },
        deleteCartGoodsList: function (ids) {
            this.$confirm('此操作删除购物车产品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var input = {
                    ids: ids
                }
                api.DeleteCartGoods(input)
                    .then((res) => {
                        if (res.code == 1) {
                            this.$message.success("删除成功");
                            this.LoadData();
                        }
                    }).catch(err => {

                    })
            }).catch(() => {
                
            })
        },
        // 删除购物车商品
        deleteCartGoods: function (ids,item) {
            this.$confirm('此操作删除购物车产品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                var input = {
                    ids: ids
                }
                console.log("data",this.data)
                api.DeleteCartGoods(input)
                    .then((res) => {
                        if (res.code == 1) {
                            this.$message.success("删除成功");
                            console.log("ids",ids);
                            ids.split(",").forEach(element => {
                                var index = item.goods.findIndex(x => x.id == element);
                                console.log("index",index)
                                if (index !== -1) {
                                    item.goods.splice(index, 1)
                                }
                                console.log(index);
                            })
                        }
                })
            })
        },
        //点击公司选择公司下所有商品
        companyChecked(item) {
            item.goods.forEach(x => {
                x.checked = item.checked;
            })
            this.sumTotal()
        },
        //全选
        allCheckedChange(val) {
            this.data.forEach(data => { 
                data.checked = val;
                data.goods.forEach(x => { 
                    x.checked = val;
                })
            })
            this.sumTotal()
        },
        // 计算金额/数量
        sumTotal: function () {
            var sumTotal = 0;
            var goodsNum = 0;
            this.data.forEach(element => {
                element.goods.forEach(x => { 
                    if (x.checked) { 
                        console.log("x",x)
                        goodsNum += x.goods_num
                        sumTotal += x.goods_num * x.goods_price
                    }
                })
            })
            this.goodsNumber = goodsNum;
            this.countAmount = sumTotal;
        },
        clearDownGoods() { 
            this.$confirm('是否清空购物车下架产品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(() => {
                api.ClearCartDownGoods()
                    .then((res) => {
                        if (res.code == 1) {
                            this.$message.success("清空成功");
                            this.LoadData();
                        }
                    }).catch(err => {

                    })
            }).catch(() => {
                
            })
        },
        // 前往结算页面
        goConfirm: function () {
            //只能一次结算一个企业
            var data = this.data.filter(x => x.checked ? x.checked:x.goods.filter(y=>y.checked).length > 0);
            if (data.length == 0) { 
                this.$message.warning("请选择需要结算的商品");
                return;
            }
            if (data.length == 1) {
                let input = {
                    list: [],
                    remark: "",
                    cart_ids: data[0].goods.map(x => x.id).join(",")
                }
                data.forEach(element => { 
                    element.goods.forEach(x => { 
                        input.list.push({
                            goods_id: x.goods_id,
                            goods_num: x.goods_num,
                            filings_sku_id: x.filings_sku_id,
                            remark: ""
                        })
                    })
                })
                console.log("input",input)
                this.$router.push({path: '/memberCenter/confirm', query: { goods: btoa(JSON.stringify(input)) }})
            } else { 
                this.$message.warning("一次只能结算一个企业");
            }
        },
        // 加载数据
        LoadData: function () {
            api.GetCartPageList(this.query)
                .then((res) => {
                    let list = [];
                    res.data.forEach(data => {
                        data.goods.forEach(x => { 
                            x.checked = false;
                        })
                        let model = {
                            id: data.enterprise.id,
                            name: data.enterprise.name,
                            goods: data.goods,
                            checked :false
                        }
                        // let model1 = {
                        //     id: data.enterprise.id,
                        //     name: "星琪量子",
                        //     goods: data.goods,
                        //     checked :false
                        // }
                        list.push(model);
                        // list.push(JSON.parse(JSON.stringify(model1)));
                    })
                    console.log("list", list)
                    this.data = list;
            })
        },
    },
    created() { 
        this.LoadData();
    },
    mounted: function(){

    }

  };
</script>
<style>
.car_num_operate .el-input-number__decrease{
        left: 1px;
    border-radius: 4px 0 0 4px;
    border-right: none;
}
.car_num_operate .el-input-number{ 
    width: 120px;
}
.car_num_operate  .el-input-number .el-input__inner{
    border: none;
    padding-left: 30px;
    padding-right: 30px;
    height: 40px;
    line-height: 40px;
}
.el-input-number__decrease, .el-input-number__increase{
    position: absolute;
    z-index: 1;
    top: 1px;
    width: 40px;
    height: auto;
    text-align: center;
    background: transparent;
    color: #606266;
    cursor: pointer;
    font-size: 13px;
}
.car_num_operate .el-input-number__increase{
    border-left: none;
}

.el-menu--horizontal>.el-submenu .el-submenu__title{
    color: #333333;
    font-size: 0.16rem;
}
.el-menu--popup-bottom-start{
    margin-top: 0;
}
.el-menu--popup{
    border-radius: 5px;
    padding:10px 15px;
}
.el-menu--horizontal>.el-submenu:focus .el-submenu__title, .el-menu--horizontal>.el-submenu:hover .el-submenu__title,
.el-menu--horizontal>.el-submenu.is-opened .el-submenu__title, .el-menu--horizontal>.el-submenu.is-opened .el-submenu__title i,
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
    color: #017CBA;
}
.el-menu.el-menu--horizontal,
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
    border-bottom: 0;
}
.el-dropdown-menu__item, .el-menu-item{
    font-size: 0.15rem;
}
.el-menu--horizontal>.el-submenu{
    float: none;
}
</style>